import React, { Component } from 'react'
import NavHeader from '../../components/NavHeader'
import { Button } from 'antd-mobile'
import { getFavorate } from '../../api/user'
import HouseItem from '../../components/HouseItem'
import { REQURST_URL } from '../../utils/url'
import NoHouse from '../../components/NoHouse'
import styles from './index.module.css'
export default class Favorite extends Component {
  state = {
    favoriteList: [],
    isLoading: true,
  }

  componentDidMount() {
    this.loadGetFavorate()
  }

  async loadGetFavorate() {
    const { data: res } = await getFavorate()
    this.setState({
      favoriteList: res.body,
      isLoading: false,
    })
  }

  renderHosueItem = () => {
    const { favoriteList } = this.state
    return favoriteList.map((item) => {
      const { desc, houseCode, houseImg, tags, price, title } = item
      return (
        <HouseItem
          key={item.title}
          desc={desc}
          src={REQURST_URL + houseImg}
          tags={tags}
          title={title}
          price={price}
          onClick={() => this.props.history.push('/detail/' + houseCode)}
        ></HouseItem>
      )
    })
  }

  renderItem = () => {
    const { isLoading, favoriteList } = this.state
    if (!favoriteList.length && !isLoading)
      return (
        <NoHouse>
          暂无房源
          <Button
            onClick={() => this.props.history.push('/layout/list')}
            size="small"
            className={styles.goFind}
          >
            去找房
          </Button>
        </NoHouse>
      )

    return this.renderHosueItem()
  }
  // 
  render() {
    return (
      <div>
        <NavHeader>收藏列表</NavHeader>
        <div className={styles.favorite}>{this.renderItem()}</div>
      </div>
    )
  }
}
